<template>
  <ThemeAdaptPage
    class="demo-container"
    style="padding: 10px; width: 100%; height: 100%"
    theme="dark"
  >
    <div class="label">输入框</div>
    <div class="demo">
      <div class="label"></div>
      <TextInput
        v-model="textInputValue1"
        show-clear
        placeholder="请输入账号"
      ></TextInput>
      <TextInput
        v-model="textInputValue2"
        show-clear
        type="password"
        placeholder="请输入密码"
      ></TextInput>
    </div>
    <div class="label">按钮</div>
    <div class="demo btns">
      <AfastButton @click="onsubmit"></AfastButton>
      <AfastButton @click="onsubmit" type="primary" text="首选"></AfastButton>
      <AfastButton @click="onsubmit" type="success" text="成功"></AfastButton>
      <AfastButton @click="onsubmit" type="warn" text="警告"></AfastButton>
      <AfastButton @click="onsubmit" type="fail" text="失败"></AfastButton>
      <AfastButton @click="onsubmit" icon="check"></AfastButton>
      <AfastButton
        @click="onsubmit"
        type="primary"
        icon="check"
        text="确定"
      ></AfastButton>
      <AfastButton
        @click="onsubmit"
        type="success"
        icon="check"
        text="成功"
      ></AfastButton>
      <AfastButton
        @click="onsubmit"
        type="warn"
        icon="prompt"
        text="警告"
      ></AfastButton>
      <AfastButton
        @click="onsubmit"
        type="fail"
        icon="cancel"
        text="失败"
      ></AfastButton>
    </div>
  </ThemeAdaptPage>
</template>
<script setup lang="ts">
import ThemeAdaptPage from "@/components/a/ThemeAdaptPage.vue";
import { ref } from "vue";
import AfastButton from "@/components/a/AfastButton.vue";
import TextInput from "@/components/a/TextInput.vue";
const textInputValue1 = ref("");
const textInputValue2 = ref("");
const onsubmit = () => {
  alert("提交");
};
</script>
